<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="BootStrap/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="layui-v2.5.7/layui/css/layui.css"/>
    <script src="layui-v2.5.7/layui/layui.js"></script>
    <script src="javascript/jquery.js"></script>
    <script src="BootStrap/js/bootstrap.min.js"></script>
    <style>
        #up,#up tr,#up td{
            border: 1px solid white;
        }
    </style>
</head>
<!--
    @Author: LuXi
    用户表展示
-->
<body>
<section class="page-hd">
    <header>
        <h2 class="title"><font color="#d3d3d3">用户管理</font>/<font>用户</font></h2>
    </header>
    <hr>
</section>

<form class="layui-form layui-form-pane" id="yonghuSearchForm">
                <input type="hidden" name="flag" />

    <div class="layui-form-item">
        <label class="layui-form-label">
            <i class="layui-icon layui-icon-search" style="font-size: 30px;color:lightgray;"></i>
        </label>
        <div class="layui-input-inline">
            <input class="layui-input" name="userphone" type="text" placeholder="请输入用户的手机号" autocomplete="off" />
        </div>
        <div class="layui-input-inline">
            <button type="button" onclick="phone_search()" class="layui-btn layui-btn-normal">搜索</button>

        </div>
    </div>








    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">用户类型</label>
            <div class="layui-input-inline">
                <select class="form-control" name="usertype" lay-search>
                    <option value="" selected>--所有类型--</option>
                    <option value="1">新用户</option>
                    <option value="9">老用户</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-inline">
                <select class="form-control" name="usersex" lay-search>
                    <option value="">--全部用户--</option>
                    <option value="1">男</option>
                    <option value="2">女</option>
                </select>
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">注册日期</label>
            <div class="layui-input-inline">
                <input class="layui-input" type="text" name="timeBegin" placeholder="选择开始时间" autocomplete="off" />
            </div>
            <div class="layui-form-mid">&nbsp;至&nbsp;</div>
            <div class="layui-input-inline">
                <input class="layui-input" type="text" name="timeOver" placeholder="选择结束时间" autocomplete="off" />
            </div>
            <div class="layui-input-inline">

                <button type="button" onclick="other_search()" class="layui-btn layui-btn-normal">确定</button>
                <button type="button" onclick="form_reset()" class="layui-btn layui-btn-primary">清除</button>
            </div>
        </div>
    </div>

<!--当前页-->
    <input type="hidden" name="pageNum" />
</form>

<hr>
<table style="margin: 5px 0px;">
<!--    <tr>-->
<!--        <td >-->
<!--            <button onclick="out_table()" class="btn btn-primary" >导出报表</button>-->
<!--            <br/>-->
<!--            <br/>-->
<!--        </td>-->

<!--    </tr>-->
    <tr>
        <td colspan="2">
            &nbsp;&nbsp;&nbsp;
            <i class="layui-icon layui-icon-friends"></i>
            <font size="4">总用户数:</font>
            &nbsp;&nbsp;&nbsp;
            <span id="user_count" style="font-size: 20px"></span>
            <br/>
        </td>
    </tr>
</table>
<table class="layui-table" style="text-align: center;" lay-skin="line">
    <thead>
    <tr>
        <th style="text-align: center;">手机号</th>
        <th style="text-align: center;">昵称</th>
        <th style="text-align: center;">性别</th>
        <th style="text-align: center;">用户类型</th>
        <th style="text-align: center;">注册时间</th>
        <th style="text-align: center;">订单总数</th>
        <th style="text-align: center;">累计消费</th>
        <th style="text-align: center;">下单医院</th>
        <th style="text-align: center;">操作</th>
    </tr>
    </thead>
    <tbody id="list">
    <!--<tr class="cen"></tr>-->
    </tbody>
</table>

<div class="container">
    <div class="row" style="margin-right: 40%;">
        <ul class="pagination pull-right" id="pages">
<!--            <li><a href="#">&laquo;</a></li>-->
<!--            <li><a href="#">1</a></li>-->
<!--            <li><a href="#">5</a></li>-->
<!--            <li><a href="#">&raquo;</a></li> -->
        </ul>
    </div>
</div>
<div class="modal fade" id="modal_delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">用户删除</h4>
            </div>
            <div class="modal-body">
               <h2>您确认删除该用户吗？删除后有关用户信息会全部删除哦</h2>
            </div>
            <div class="modal-footer">
                <button id="user_delete" type="button" class="btn btn-default">删除</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">

    layui.use('form', function () {
        var form = layui.form;
    });



    function out_table() {
        alert("没写")
    }

    list();
    function list() {
        $.ajax({
            url:"/yonghu/list",
            type:"get",
            data:$("#yonghuSearchForm").serialize(),
            success:function (data) {
                if(data.result){
                    var list = "";
                    $.each(data.list,function (index,user) {
                        list += "<tr>";
                        list += "<td>"+user.userphone+"</td>>";
                        list += "<td>"+user.username+"</td>>";
                        list += "<td>"+ (user.usersex == 1 ? '男' : '女') +"</td>>";
                        list += "<td>"+ (user.usertype == 9 ? '老用户' : "新用户") +"</td>>";
                        list += "<td>"+user.userregistrationtime+"</td>>";
                        list += "<td>"+user.count+"次</td>>";
                        list += "<td>"+user.money+"</td>>";
                        list += "<td>"+user.hospital+"</td>>";
                        list += "<td>" +
                            "<a href='YongHuXiangQing.html' onclick='XiangQing("+user.userid+")' target='YongHu'>" +
                            "<span style='color: blue;font-weight: bold'>详情</span>" +
                            "</a> " +
                            "| " +
                            "<a href='javascript:deleteYongHu("+user.userid+")' ><span style='color: blue;font-weight: bold'>删除</span></a></td>>";
                        list += "</tr>";

                    });
                }else{
                    layui.use('layer', function(){
                        var layer = layui.layer;
                        layer.msg('未找到 ！', {icon: 5});
                    });
                }
                $("#list").html(list);
                $("#user_count").text(data.size);
                pageLoad(data.pageInfo);
                pageClick(data.pageInfo.pages);
            }
        });
    }

    //分页
    function pageLoad(data) {
        var str = "<li><a href='"+(data.pageNum - 1)+"'>上一页</a></li>";
        // for (var i = 1; i <= data.pages; i++) {
        //     if(i == data.pageNum){
        //         str += "<li class='active'><a href='"+i+"'>"+i+"</a></li>";
        //     }else{
        //         str += "<li><a href='"+i+"'>"+i+"</a></li>";
        //     }
        // }
        str += "<li class='active'><a>"+data.pageNum+"</a></li>";
        str += "<li><a href='"+(data.pageNum + 1)+"'>下一页</a></li>";
        str += "<li><a>共"+data.pages+"页</a></li>";
        $("#pages").html(str);
    }

    function pageClick(pages) {
        $("#pages a").click(function () {
            var cutPage = $(this).attr("href");
            if(cutPage > pages){
                cutPage = pages;
            }
            if(cutPage < 1){
                cutPage = 1;
            }
            $(":hidden[name=pageNum]").val(cutPage);
            list();
            return false;
        });
    }

    /* 清除表单 */
    function form_reset() {
        $("#yonghuSearchForm")[0].reset();
        list();
    }
    //电话查询
    function phone_search() {
        $(":input[name=flag]").val(true);
        list();
    }
    //其他条件查询
    function other_search() {
        $(":input[name=flag]").val(false);
        list();
    }
    //删除用户
    function deleteYongHu(userid) {
        $("#modal_delete").modal("show");
        $("#user_delete").click(function () {
            $.ajax({
                type:"post",
                url:"/yonghu/delete",
                data:{"userid":userid},
                success:function (data) {
                    if(data.result){
                        $("#modal_delete").modal("hide");
                        list();
                    }else{
                        layui.use('layer', function(){
                            var layer = layui.layer;
                            layer.msg('删除失败 ！', {icon: 5});
                        });
                    }
                }
            });
        });
    }

    //跳转详情页面
    function XiangQing(item){
        window.localStorage.setItem("userid",item);
    }

</script>
</body>
</html>